import React, { Component } from 'react';
import { Relax } from 'iflux2';
import { Row, Col, Select, Input, Button, Icon, Form } from 'antd';

import classNames from 'classnames';

import { SearchFields } from '../constant/options';

import noop from 'util/noop';

const Option = Select.Option;
const InputGroup = Input.Group;

@Relax
export default class Search extends Component {
    static defaultProps = {
        setPagination: noop,
        resetPagination: noop,
        setCondition: noop,
        queryOrderList: noop
    }

    render() {
        return (<SearchForm {...this.props} />)
    }
}

class SearchForm extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const { form: { getFieldDecorator, getFieldValue } } = this.props;
        const btnCls = classNames('ant-search-btn', 'simple-search-btn', {
            'ant-search-btn-noempty': !!getFieldValue('simpleValue')
        })

        const simpleTypeField = getFieldDecorator('simpleType', {
            initialValue: 'buyerUserName'
        })(
            <Select className="percent100" size="large">
                {SearchFields.map(option => <Option {...option}>{option.text}</Option>)}
            </Select>
            );

        const simpleValueField = getFieldDecorator('simpleValue')(
            <Input onPressEnter={() => this.query()} />
        );

        return (
            <Form className="search-form">
                <div className="simple-search">
                    <div className="ant-search-input-wrapper">
                        <Row className="search-select">
                            <Col span="6" className="search-item">
                                <Row className="select-and-input">
                                    <Col span="8">{simpleTypeField}</Col>
                                    <Col span="16">{simpleValueField}</Col>
                                    <Button icon="search" className={btnCls} onClick={() => this.query()} />
                                </Row>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Form>
        );
    }

    query = () => {

        let { simpleType, simpleValue } = this.props.form.getFieldsValue();

        //点击搜索，1：重置分页信息 2：搜索订单列表
        this.props.resetPagination();
        // 设置搜索条件
        this.props.setCondition(simpleType, simpleValue);
        // 查询
        this.props.queryOrderList();
    }

};

SearchForm = Form.create()(SearchForm);
